<template>
  <div class="out">
    <zHeader pageTitle="问卷调查"></zHeader>
    
    <div class="pageOut">
      <section class="basicInfoBox">
        <div class="title">基本信息</div>
        <van-field name="radio" label="您的性别：" label-align="top">
          <template #input>
            <van-radio-group v-model="questionData.gender" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="questionData.ageString"
          readonly
          is-link
          name="picker"
          label="您的年龄："
          placeholder="点击选择年龄"
          @click="ageStringShowPicker = true"
          label-align="top"
        />
        <van-popup v-model:show="ageStringShowPicker" destroy-on-close position="bottom">
          <van-picker
            :columns="ageData"
            :model-value="ageStringPickerValue"
            @confirm="ageStringOnConfirm"
            @cancel="ageStringShowPicker = false"
          />
        </van-popup>
        <van-field
          v-model="questionData.profession"
          readonly
          is-link
          name="picker"
          label="您的职业："
          placeholder="点击选择职业"
          @click="professionShowPicker = true"
          label-align="top"
        />
        <van-popup v-model:show="professionShowPicker" destroy-on-close position="bottom">
          <van-picker
            :columns="professionData"
            :model-value="professionPickerValue"
            @confirm="professionOnConfirm"
            @cancel="professionShowPicker = false"
          />
        </van-popup>
        <van-field
          v-if="questionData.profession == '其他'"
          v-model="questionData.professionQitaContent"
          name="input"
          label=""
          placeholder="其他（请注明）"
          label-align="top"
        />
        <van-field style="height: 0; padding: 0;"/>
      </section>

      <section class="viewHouseExperienceBox">
        <div class="title">看房体验</div>
        <van-field name="rate" label="看房活动的整体满意度如何？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.overallSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field name="rate" label="楼盘的地理位置满意吗？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.locationSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field name="rate" label="楼盘的周边环境(如交通、商业配套、学校、医院等)满意吗？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.aroundSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field name="rate" label="楼盘的建筑风格和外观设计满意吗？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.designSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field name="rate" label="楼盘的户型设计满意吗？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.apartmentDesignSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field name="rate" label="楼盘的内部装修和设施设备满意吗？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.indoorEquipmentSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field style="height: 0; padding: 0;"/>
      </section>

      <section>
        <div class="title">销售人员服务</div>
        <van-field name="rate" label="您认为销售人员的态度热情吗？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.mannerSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field name="rate" label="您认为销售人员的专业程度如何？" label-align="top">
          <template #input>
            <div class="rateInputArea">
              <van-rate v-model="questionData.professionLevelSatisfy" color="#ffd21e"/>

              <div class="tip">满意为5星，不满意为0星</div>
            </div>
          </template>
        </van-field>
        <van-field
          label="其他问题" 
          label-align="top"
          v-model="questionData.otherQuestion"
          rows="4"
          type="textarea"
          placeholder="请输入其他问题"
          class="custom-textarea"
        />
      </section>

      <div class="submitBtnArea">
        <van-button class="submitBtn" type="primary" @click="submitHandler">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { postWenJuanQiaoChaCreate } from '@/api/wenjuandiaocha/index.js'
import { pageConstant } from '@/config/contant.js'
import { getUserId } from '@/config/config.js'
import { useRouter } from 'vue-router'
const router = useRouter()

const questionData = ref({
  gender: '',
  ageString: '',
  profession: '',
  professionQitaContent: '',
  overallSatisfy: 0,
  locationSatisfy: 0,
  aroundSatisfy: 0,
  designSatisfy: 0,
  apartmentDesignSatisfy: 0,
  indoorEquipmentSatisfy: 0,
  mannerSatisfy: 0,
  professionLevelSatisfy: 0,
  otherQuestion: ''
})

const ageStringPickerValue = ref([]);
const ageStringShowPicker = ref(false);
const ageData = ref([
  { text: '18-25岁', value: '18-25岁' },
  { text: '26-35岁', value: '26-35岁' },
  { text: '36-45岁', value: '36-45岁' },
  { text: '46-55岁', value: '46-55岁' },
  { text: '56岁及以上', value: '56岁及以上' }
])
const ageStringOnConfirm = ({ selectedValues }) => {
  questionData.value.ageString = selectedValues[0];
  ageStringPickerValue.value = selectedValues;
  ageStringShowPicker.value = false;
};

const professionPickerValue = ref([])
const professionShowPicker = ref(false)
const professionData = ref([
  { text: '企业职员', value: '企业职员' },
  { text: '自由职业者', value: '自由职业者' },
  { text: '政府机关/事业单位员工', value: '政府机关/事业单位员工' },
  { text: '学生', value: '学生' },
  { text: '其他', value: '其他' },
])
const professionOnConfirm = ({ selectedValues }) => {
  questionData.value.profession = selectedValues[0];
  professionPickerValue.value = selectedValues;
  professionShowPicker.value = false;
};

const submitHandler = () => {
  if (!questionData.value.gender || questionData.value.gender.length == 0) {
    showToast('请选择性别');

    return 
  }
  
  if (!questionData.value.ageString || questionData.value.ageString.length == 0) {
    showToast('请选择年龄');

    return 
  }
  
  if (!questionData.value.profession || questionData.value.profession.length == 0) {
    showToast('请选择职业');

    return 
  }

  if (questionData.value.profession && questionData.value.profession == '其他' && questionData.value.professionQitaContent && questionData.value.professionQitaContent.length == 0) {
    showToast('请注明职业');

    return 
  }
  
  if (!questionData.value.overallSatisfy || questionData.value.overallSatisfy.length == 0) {
    showToast('请选择看房活动的整体满意度');

    return 
  }
  
  if (!questionData.value.locationSatisfy || questionData.value.locationSatisfy.length == 0) {
    showToast('请选择地理位置满意度');

    return 
  }
  
  if (!questionData.value.aroundSatisfy || questionData.value.aroundSatisfy.length == 0) {
    showToast('请选择周边环境满意度');

    return 
  }
  
  if (!questionData.value.designSatisfy || questionData.value.designSatisfy.length == 0) {
    showToast('请选择楼盘的建筑风格和外观设计满意度');

    return 
  }
  
  if (!questionData.value.apartmentDesignSatisfy || questionData.value.apartmentDesignSatisfy.length == 0) {
    showToast('请选择楼盘的户型设计满意度');

    return 
  }
  
  if (!questionData.value.indoorEquipmentSatisfy || questionData.value.indoorEquipmentSatisfy.length == 0) {
    showToast('请选择楼盘的内部装修和设施设备满意度');

    return 
  }
  
  if (!questionData.value.mannerSatisfy || questionData.value.mannerSatisfy.length == 0) {
    showToast('请选择销售人员的态度热情满意度');

    return 
  }
  
  if (!questionData.value.professionLevelSatisfy || questionData.value.professionLevelSatisfy.length == 0) {
    showToast('请选择销售人员的专业程度满意度');

    return 
  }

  let param = {
    createBy: getUserId(),
    sex: questionData.value.gender,
    age: questionData.value.ageString,
    kanFangHuoDongZhengTi: questionData.value.overallSatisfy,
    louPanDiLiWeiZhi: questionData.value.locationSatisfy,
    louPanZhouBianHuanJing: questionData.value.aroundSatisfy,
    louPanJianZhuHeSheJi: questionData.value.designSatisfy,
    louPanHuXingSheJi: questionData.value.apartmentDesignSatisfy,
    louPanZhuangXiuHeSheShi: questionData.value.indoorEquipmentSatisfy,
    xiaoShouTaiDu: questionData.value.mannerSatisfy,
    xiaoShouZhuanYeChengDu: questionData.value.professionLevelSatisfy,
    qiTaWenTi: questionData.value.otherQuestion
  }

  if (questionData.value.profession == '其他') {
    param.zhiYe = questionData.value.professionQitaContent
  } else {
    param.zhiYe = questionData.value.profession
  }

  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postWenJuanQiaoChaCreate(param).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      showToast('提交成功');
      setTimeout(() => {
        router.back()
      }, 1000)
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
</script>

<style lang="scss" scoped>
.out {
  min-height: 100dvh;
  width: 100vw;

  .pageOut {
    padding: 5px 10px 15px;
    width: 100%;
    box-sizing: border-box;

    .title {
      padding: 20px 0 0 16px;
      font-size: 18px;
      font-weight: bold;
    }

    ::v-deep .van-cell {
      font-size: 15px;
    }
    ::v-deep .van-field__value {
      padding: 5px 0;
    }
    ::v-deep .van-field__label--top {
      padding-top: 5px;
      color: rgb(59, 130, 246);
    }

    .rateInputArea {
      .tip {
        padding-top: 5px;
        color: rgb(107, 114, 128);
        font-size: 14px;
      }
    }

    .custom-textarea {
      ::v-deep .van-field__value {
        background-color: #f0f0f0;
        padding: 5px;
        border-radius: 10px;
      }
    }

    .submitBtnArea {
      display: flex;
      justify-content: center;
      padding: 20px 0 10px;

      .submitBtn {
        width: 90px;
        font-size: 16px;
      }
    }
  }
}
</style>